<template>
    <div>
        <el-table :data="Table_List.datas" :max-height="Table_Maxheight != 0 ? Table_Maxheight : 'auto'"
            @selection-change="Submit_List_ = $event" :row-class-name="RowClassName" :show-summary="Table_Show_Summary"
            ref="Table" class="Table">
            <el-table-column type="selection" align="center" width="55" fixed="left"></el-table-column>
            <template v-for="(item, value) in Table_Ranks">
                <template v-if="Table_Ranks_Checked.includes(item.label)">
                    <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
                        :min-width="item.minwidth" :fixed="item.fixed" :show-overflow-tooltip="item.showOverFlowtooltip"
                        align="center" :key="value">

                        <template v-slot="scope">

                            <template v-if="item.label == '操作'">

                                <el-button type="primary" size="mini" icon="el-icon-edit" title="编辑供应商"
                                    @click="editClientCompany(scope.row)" class="square" circle></el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete" title="删除供应商"
                                    @click="deleteClientCompany(scope.row)" class="square" circle></el-button>
                            </template>

                            <template v-else-if="item.label == '微信/微信名'">
                                {{ scope.row.supplierWechat }}
                                <template
                                    v-if="!$IsNull(scope.row.supplierWechatName) && scope.row.supplierWechat != scope.row.supplierWechatName">
                                    <template v-if="!$IsNull(scope.row.supplierWechat)">/</template>
                                    {{ scope.row.supplierWechatName }}
                                </template>


                            </template>
                            <template v-else-if="item.label == '收款信息'">
                                <template v-if="!$IsNull(scope.row.supplierBankCards)">
                                    银: {{ scope.row.supplierBankCards }},
                                </template>
                                <template v-if="!$IsNull(scope.row.supplierAlipay)">
                                    支: {{ scope.row.supplierAlipay }},
                                </template>
                                <template v-if="!$IsNull(scope.row.supplierPublicHouseholds)">
                                    公: {{ scope.row.supplierPublicHouseholds }},
                                </template>


                            </template>
                            <template v-else-if="$IsNull(scope.row[item.prop])">
                                -
                            </template>

                            <template v-else-if="item.label == '是否支持上门'">

                                {{ dict.sys_yes_no[scope.row.supplierIsVisitable].dictLabel }}

                            </template>

                            <template v-else>
                                {{ scope.row[item.prop] }}
                            </template>


                        </template>

                    </el-table-column>

                </template>
            </template>
        </el-table>
    </div>

</template>
<script>
import { mapState } from "vuex";

export default {
    name: "supplier-table",
    dicts: ['sys_yes_no'],
    props: [
        "List_QueryInfo",
        "Table_List",
        "Table_Maxheight",
        "Table_Show_Summary",
        "Submit_List",
        "Table_Ranks",
        "Table_Ranks_Checked",
    ],
    data() {
        return {};
    },

    computed: {

        Submit_List_: {
            get() {
                return this.Submit_List;
            },
            set(val) {
                this.$emit("update:Submit_List", val);
            },
        },
    },
    methods: {


        // // 表格行设置一个固定的className
        RowClassName({ row, rowIndex }) {



        },
        // 排序发生变化
        tableSortChange(column, prop, order) {
            var order = column.order;
            var prop = column.prop;


            if (this.$IsNull(order)) {
                prop = "";
                this.List_QueryInfo.desc = "true";
            } else if (order == "descending") {
                this.List_QueryInfo.desc = "true";
            } else {
                this.List_QueryInfo.desc = "false";
            }
            this.List_QueryInfo.initSort = prop
            this.List_QueryInfo.page = 1;
            this.$emit("getPage");
        },
        // 删除供应商信息
        async deleteClientCompany(submit, str) {
            const confirmResult = await this.$confirm(
                str === "all" ? "确认要批量删除信息吗?" : "确认要删除该信息吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).catch((err) => err);
            if (confirmResult !== "confirm") return;
            this.$Util.$emit("setLoading", true);
            var newArr = [];
            if (str === "all") {
                submit.forEach((item) => {
                    newArr.push(item.supplierId);
                });
            } else newArr.push(submit.supplierId);

            const { data: res } = await this.$api.deleteSpSupplierByIds({
                supplierIds: newArr.join(","),
            });
            setTimeout(() => {
                this.$Util.$emit("setLoading", false);
                if (res.code != 0) return this.$Message(res, "删除失败", "error");
                this.getPage("cancel");
                this.$Message(res, "删除成功", "success");
            }, this.$Data.Submit_Time);
        },
        // 编辑
        editClientCompany(row) {
            this.$RouterPush('add-edit-supplier', {
                supplierId: row.supplierId,
                type: 'edit'
            })
        },
        // 查看
        viewClientCompany(row) {
            this.$RouterPush('add-edit-supplier', {
                supplierId: row.supplierId,

                type: 'view'
            })
        },
        // 清空表格的全部选中
        clearCheckboxRow() {
            this.$refs["Table"].clearSelection();
        },
        // 设置表格的全选状态
        setAllCheckboxRow() {
            this.clearCheckboxRow();
            this.$refs["Table"].toggleAllSelection();
        },
        // 表格格式重置
        tableDoLayout() {
            this.$nextTick(() => {
                this.$refs.Table.doLayout();
            });
        },

        getPage(str) {
            this.$emit("getPage", str);
        },
    }
}
</script>